<template>

  <section class="enterprise container">


    <header class="breadcrumb-wrap">
      <el-breadcrumb class="breadcrumb pull-left" separator=">">
        <span class="pull-left">当前位置：</span>
        <el-breadcrumb-item><nuxt-link class="text-primay-hover" :to="{ path: '/' }">首页</nuxt-link></el-breadcrumb-item>
        <el-breadcrumb-item>搜索结果</el-breadcrumb-item>
      </el-breadcrumb>

      <div class="search-total pull-right">
        <span class="pull-right">
			共找到{{ totalResult }}条<span v-if="keyword">"<i class="text-primay text-overflow keyword" :title="keyword">{{ keyword
          }}</i>"</span>相关结果</span>
      </div>
    </header>


    <!--您是不是在找-->
    <Recommend :data="recomdWords" v-if="recomdWords.length > 0"></Recommend>

    <!-- 搜索条件 -->
    <div class="search-wrap">
      <ul class="search-condition">
        <li class="area">
          <AreaSelection
            :city="city"
            :prov="prov"
            @cancel="cancelSelectArea"
            @provChange="provChange"
            @cityChange="cityChange">

          </AreaSelection>
        </li>
        <li class="mode">
          <SearchItem
            :results="modes"
            type="modeId"
            :search-id="modeId"
            label="经营模式"
            @searchChange="searchChange">
          </SearchItem>
        </li>
      </ul>

      <div class="pull-right search-page" v-if="totalPage > 0">
        <i class="el-icon-arrow-left"
           :disabled="currentPage === 1"
           @click="changePage('prev')">
        </i>
        <input type="number" v-model.lazy.number="currentPage"> /{{totalPage}}
        <i :disabled="currentPage === totalPage"
           class="el-icon-arrow-right"
           @click="changePage('next')">
        </i>
      </div>
    </div>

    <!-- 数据列表 -->
    <div class="data-wrap">
      <ul v-if="result.length > 0">
        <li v-for="item in result" :key="item.compId">
          <div class="enterprise-info">
            <header class="clearfix">
              <h3 class="enterprise-name text-overflow">
                <a :href="`${item.shopDomain}`" target="_blank" class="text-primay-hover"  v-html="item.compName" :title="item.compName | htmlTag"></a>
              </h3>
              <!--<el-button type="primary" plain>主要按钮</el-button>-->
              <a :href="`${item.shopDomain}`" class="goshop">进入店铺</a>
            </header>

            <p class="text-overflow">主营产品：<span v-html="item.serviceRange" :title="item.serviceRange | htmlTag"></span></p>
            <p class="text-overflow">企业类型：<span class="text-muted">{{ ({
              1: '工厂',
              2: '贸易商',
              3: '工贸一体'
            })[item.compCategory]}}</span></p>
            <p class="text-overflow">企业地址：<span
              class="text-muted"
              v-html="(item.compProvinceName || '') + (item.compCityName || '') + (item.addressDetail || '')"></span>
            </p>
            <p class="icons-status">
              <span v-if="item.validStatus === 2">
                <el-tooltip
                  popper-class="icon-tooltip"
                  placement="top"
                  trigger="hover"
                  content="已认证"><i class="icon icon-auth"></i>
                </el-tooltip>已认证</span>
              <span v-if="item.userLevelCode > 1">
                <el-tooltip
                  popper-class="icon-tooltip"
                  placement="top"
                  trigger="hover"
                  :content="({2:'黄金会员', 3:'铂金会员'})[item.userLevelCode]">
                  <i class="icon"
                     :class="`icon-vip${item.userLevelCode}`"></i>
                </el-tooltip>聚诚通</span>
            </p>
          </div>

          <div class="enterprise-product">
            <div class="product" v-for="(good, index) in item.goodList" :key="good.goodsId">
              <a :href="`${item.shopDomain}/kcDetails/${good.goodsId}`" :title="item.title" target="_blank">
                <div class="img-box">
                  <img v-lazyload.cdn="good.goodsPicture" :alt="good.title"/>
                </div>

                <p class="product-name text-overflow" v-html="good.title" :title="`${good.title | htmlTag}`"></p>

                <p class="text-primay text-overflow">{{ (good.isPhonePrice|| good.minPrice === '-4008600550') ? '电议' : '￥'+good.minPrice }}</p>
              </a>
            </div>
          </div>
        </li>
      </ul>

      <!--没有数据-->
      <div class="no-result" v-if="result.length === 0">
        <p>没有找到<span v-if="keyword"> 与“ <strong class="keyword text-overflow" :title="keyword">{{ keyword
          }}</strong>”</span>相关的企业，请重新筛选条件。</p>
      </div>
    </div>


    <!-- 分页 -->
    <el-pagination
      v-if="totalPage > 1"
      class="pagination"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-count="totalPage"
      layout="prev, pager, next, jumper">
    </el-pagination>
  </section>
</template>

<script>
  import axios from '~/plugins/axios'
  import {ObjectMap} from '~/plugins/utils'
  import AreaSelection from '~/components/AreaSelection'
  import SearchItem from '~/components/SearchItem'
  import Recommend from '~/components/Recommend'

  export default {
    components: {
      AreaSelection,
      Recommend,
      SearchItem
    },
    head () {
      let seo = {
        title: `【聚贸】${this.keyword}公司，${this.keyword}供应商，${this.keyword}公司黄页 - 聚贸跨境电商平台`,
        desc: `聚贸矿产电商平台,共找到${this.totalPage}条企业信息。您可以在聚贸矿产平台找到${this.keyword}公司的工商注册年份、注册资本、经营模式及${this.keyword}公司产品的供求信息等企业详情。`
      }

      return {
        title: seo.title,
        meta: [{
          hid: 'description',
          name: 'description',
          content: seo.desc
        }]
      }
    },
    mounted () {
      // 判断是否有关键字
      let keyword
      if (typeof this.keyword === 'string') {
        keyword = this.keyword.trim()
      }
      if (keyword) {
        // 获取你是不是在找
        axios.get('/search/recommend_word', {
          params: {
            keywordType: 1,
            keyword: keyword
          }
        }).then(data => {
          this.recomdWords = data.data.data
          return this.recomdWords
        })

        // 保存搜索关键字
        axios.post('/search/saveKeyword', {
          keywordType: 1,
          keyword: keyword
        })
      }
    },
    data () {
      return {
        totalPage: 0,

        recomdWords: [],

        pageSize: 10,

        modes: [
          {name: '工厂', id: 1},
          {name: '贸易商', id: 2},
          {name: '工贸一体', id: 3}
        ]
      }
    },

    async asyncData ({query}) {
      const provCode = parseInt(query.addressProvince, 10) || undefined
      const cityCode = parseInt(query.addressCity, 10) || undefined
      const page = parseInt(query.currentPage, 10) || 1
      const modeId = parseInt(query.compCategory, 10) || -1
      const keyword = query.q || ''

      let q = {
        // 当前页码 没有默认第一页
        currentPage: page || 1,

        // 省份ID 查找当前省份下的企业
        addressProvince: provCode,

        // 城市ID 查找当前城市下的企业
        addressCity: cityCode === -1 ? undefined : cityCode,

        // 经营模式
        compCategory: modeId === -1 ? undefined : modeId,

        // 每页条数
        pageSize: 10,

        // 关键字
        keyword: keyword
      }

      const [{result: companys, totalPage, totalResult}] = await Promise.all([
        axios.get('/search/company', {params: q}).then(data => {
          return data.data.data
        })
      ])

      // ajax 获取数据
      return {

        totalPage: totalPage || 0,

        totalResult: totalResult || 0,

        result: companys || [],

        query: query,

        currentPage: page,

        prov: {
          placeCode: provCode
        },

        modeId: modeId,

        keyword: keyword,

        city: {
          placeCode: cityCode || -1
        }
      }
    },

    methods: {

      /**
       * [getEnterprose]
       * 获取企业列表
       * @author zhoul
       * @version [version]
       * @param   {[Object]}  query [查询参数]
       * @return  {[undefined]}        [无返回值]
       */
      async getEnterprose (query = {}) {
        let q = {
          // 当前页码 没有默认第一页
          currentPage: this.currentPage || 1,

          // 省份ID 查找当前省份下的企业
          addressProvince: this.prov.placeCode,

          // 城市ID 查找当前城市下的企业
          addressCity: this.city.placeCode === -1 ? undefined : this.city.placeCode,

          // 经营模式
          compCategory: this.modeId,

          // 每页条数
          pageSize: this.pageSize,

          keyword: this.keyword
        }

        this.$router.push({
          path: `enterprise`,
          query: ObjectMap(q)
        })
      },

      /**
       * [handleCurrentChange]
       * element-ui 分页组件中的页码改变
       * @author zhoul
       * @version [version]
       * @return  {[type]}  [description]
       */
      handleCurrentChange () {
        this.getEnterprose()
      },

      /**
       * [changePage]
       * 搜索区域的点击上一页/下一页
       * @author zhoul
       * @version [version]
       * @return  {[type]}  [description]
       */
      changePage (t) {
        if (t === 'prev') {
          this.currentPage--
        } else {
          this.currentPage++
        }
      },

      /**
       * [cancelSelectArea]
       * 搜索组件内部点击取消
       * @author zhoul
       * @version [version]
       * @return  {[type]}  [description]
       */
      cancelSelectArea () {
        this.prov = {}
        this.city = {}
        this.currentPage = 1
        this.getEnterprose()
      },

      /**
       * [provChange]
       * 选择的省份改变，发起ajax请求获取当前省份下的企业
       * @author zhoul
       * @version [version]
       * @param   {Object}  prov [选择的省份对象]
       * @return  {undefined}       [无返回值]
       */
      provChange (prov = {}) {
        this.prov = prov
        // 选择省份就要清除市
        this.city = {}
      },

      /**
       * [cityChange 城市选择]
       * 选择的城市改变，发起ajax请求获取当前城市下的企业
       * @author zhoul
       * @version [version]
       * @param   {Object}  city [选择的城市对象]
       * @return  {undefined}  [无返回值]
       */
      cityChange (city = {}) {
        this.city = city || {}
        this.currentPage = 1
        this.getEnterprose()
      },

      /**
       * [searchChange 经营模式搜索]
       * 搜索条件组件中的搜索条件改变触发搜索
       * @author zhoul
       * @version [version]
       * @return  {[undefined]}  [无返回值]
       */
      searchChange (search = {data: {}}) {
        this[search.type] = search.data.id
        this.currentPage = 1
        this.getEnterprose()
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>

  @import "../element-variables";

  .search-total {
    color: #9e9e9e;

    .keyword {
      max-width: 100px;
      vertical-align: middle;
    }
  }

  .search-wrap .select-show {
    border: none;
    border-right: 1px solid #dedede;
  }

  .search-wrap {
    height: 42px;
    border: 1px solid #dedede;
    background: #fff;

    margin-bottom: 20px;
  }

  .search-condition {
    float: left;
    li {
      float: left;
    }
  }

  .enterprise {
    padding-bottom: 50px;
  }

  .search-info {
    color: #6e6e6e;
    margin: 20px 0;
  }

  .data-wrap {

    li {
      overflow: hidden;
      border: 1px solid #dedede;
      background: #fff;
      margin-bottom: 10px;
      padding: 20px;

      &:hover {
        /*box-shadow: 0 2px 4px 0 #dedede;*/
        border-color: $--color-primary;
      }

      header {
        padding: 10px 0;
      }
    }

    .icons-status {
      span {
        padding-right: 20px;
      }

      .icon {
        margin-right: 5px;
      }
    }

    .enterprise-info {
      float: left;
      width: 675px;

      p {
        margin-top: 12px;
        color: #9e9e9e;
      }
    }

    .enterprise-product {
      float: right;
      width: 450px;
    }

    .enterprise-name {
      float: left;
      padding-right: 125px;
      width: 100%;
      line-height: 34px;
      font-size: 16px;
      color: #3e3e3e;
      font-weight: normal;
    }

    .goshop {
      float: left;
      width: 120px;
      margin-left: -120px;
      padding: 6px 15px;
      display: inline-block;
      background-color: #fff;
      border: 1px solid $--color-primary;
      color: $--color-primary;
      text-align: center;
      border-radius: 2px;
      height: 34px;

      &:hover {
        border-color: #E8AF68;
        background-color: rgba(#E8AF68, .8);
        color: #fff;
      }
    }
  }

  .enterprise-product {
    .product {
      float: left;
      width: 130px;
      margin-left: 20px;
    }

    .img-box {
      width: 130px;
      height: 130px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .product-name {
      padding: 6px 0;
    }

    .product-price {
      color: #ff2400;
      padding-top: 6px;
    }
  }
</style>

<style lang="scss" scoped>
  @import "../assets/scss/search_page.scss";
</style>
